<template>
  <div class="m-wrap">
    <div class="m-item">
      <div class="m-item-title">广告名称：</div>
      <div class="m-item-info">
        <input class="m-item-inp" v-model="mName" type="text" placeholder="请输入名字">
      </div>
    </div>
     <div class="m-item">
      <div class="m-item-title">跳转地址：</div>
      <div class="m-item-info">
        <input class="m-item-inp" v-model="mPath" type="text" placeholder="请输入路径">
      </div>
    </div>
    <div class="m-item">
      <div class="m-item-title">图片上传：</div>
      <div class="m-item-info m-img-upload">
        <div class="m-img-btn">
          <label for="mImg">上传</label>
          <span>建议图片尺寸750*200</span>
        </div>
        <input id="mImg" type="file"  ref="mFile" @change="fileUpload"  multiple/>
        <img v-if="imgSrc" :src="imgSrc">
      </div>
    </div>
     <div class="m-item">
      <div class="m-item-title">是否开启：</div>
      <div class="m-item-info">
        <el-switch
          v-model="isSwitch"
          active-color="#409eff"
          inactive-color="#ff4949">
        </el-switch>
      </div>
    </div>
     <el-button class="m-submit" type="primary" @click="submitFn">提交</el-button>
  </div>
</template>

<script>
  import api from '@/fetch/api.js'
  export default {
    data() {
      return {
        isSwitch:true,
        imgSrc:'',
        mName:'',
        mPath:'',
        routeId:null,
      };
    },
    mounted(){
      // 获取路由参数
      this.routeId = this.$route.params.id
      // 获取数据
      this.getEditList({id:this.routeId})
    },
    methods: {
      getEditList(params){
        api.mAdEditList(params)
        .then(res=>{
          if(res.code===1){
            console.log('cc11')
            console.log(res)
            if(res.code===1){
              const _data = res.data
              this.isSwitch = Boolean(_data.status)
              this.imgSrc = _data.src 
              this.mName = _data.name 
              this.mPath = _data.path
            }
          }
        })
      },
     submitFn(){
       let {isSwitch,imgSrc,mName,mPath,routeId} = this
       console.log(isSwitch)
       if(!mName){
          this.$message({
            message: '广告名称不为空',
            type: 'warning'
          });
          return
       }
       if(!imgSrc){
          this.$message({
            message: '请上传图片',
            type: 'warning'
          });
          return
       }
       this.editFn({
         isSwitch,imgSrc,mName,mPath,id:routeId
       })
     },
     editFn(params){
       api.madEdit(params)
        .then(res=>{
          if(res.code===1){
             // 修改成功
             this.$message({
              message: res.msg,
              type: 'success'
            });
            this.$router.push({path:'/Mad/list'})  
           }else{
             // 修改失败
            this.$message({
              message: res.msg,
              type: 'error'
            });
           }
        })
     },
     fileUpload(){
      let data = this.$refs.mFile.files[0];
      let imgFile = new FileReader();
      imgFile.readAsDataURL(data);
      imgFile.onload = res => {
        console.log(res);
        let _base64=res.target.result
        if(_base64){
          api.uploadFileToBase64({icon:_base64})
          .then(res=>{
            if(res.code===1){
              this.imgSrc = res.data
            }
          })
        }
      }; 
     }
    }
  }
</script>

<style>
.m-submit{
  margin-top:30px !important;
}
.m-item-inp{
  height:36px;
  width:375px;
  border:1px solid #ddd;
  border-radius: 4px;
  font-size:14px;
  color:#444;
  text-indent: 0.5em;
}
.m-wrap{
  margin-left:30px;
}
.m-item{
  padding-top:30px;
  width: 600px;
  display: flex;
}
.m-item-title{
  font-size:14px;
  line-height: 2;
}
.m-item-info{
  margin-left:10px;
  flex:1;
}
.m-img-btn {
  display: flex;
  align-items: center;
}
.m-img-upload label{
  display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.m-img-upload input{
  display: none;
}
.m-img-upload img{
  display: block;
  width:375px;
  height:100px;
  margin-top:20px;
}
.m-img-upload span{
  font-size:12px;
  color:#666;
  padding-left:20px;
}

</style>